<template>
  <a-layout
    id="components-layout-demo-custom-trigger"
    :style="{ height: '100vh' }"
  >
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">{{ collapsed ? '管理' : '管理后台' }}</div>
      <menuSider />
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <TabsHeader :pageList="pageList" :activePage="activePage" @change="changePage" @close="remove"/>
      <a-layout-content
        :style="{
          margin: '15px 16px 24px 16px',
        }"
      >
        <!-- Content -->
        <router-view ref="tabContent"></router-view>
        <div style="height: 30px"></div>
      </a-layout-content>
      <!-- <a-layout-footer style="textAlign: center">
        kk出品
      </a-layout-footer> -->
    </a-layout>
  </a-layout>
</template>

<script>
import menuSider from "@/layout/menuSider";
import TabsHeader from '@/components/TabsHeader';
export default {
  name: "Home",
  data() {
    return {
      collapsed: false,
      pageList: [],
      activePage: '',
      multiPage: 24
    };
  },
  components: {
    menuSider,
    TabsHeader
  },
  created() {
    const route = this.$route
    if (this.pageList.findIndex(item => item.path === route.path) === -1) {
      this.pageList.push(this.createPage(route))
    }
    this.activePage = route.path
    if (this.multiPage) {
      this.$nextTick(() => {
        this.setCachedKey(route)
      })
      this.addListener()
    }
  },
  watch: {
    '$route': function (newRoute) {
      this.activePage = newRoute.path
      const page = this.pageList.find(item => item.path === newRoute.path)
      if (!this.multiPage) {
        this.pageList = [this.createPage(newRoute)]
      } else if (page) {
        page.fullPath = newRoute.fullPath
      } else if (!page) {
        this.pageList.push(this.createPage(newRoute))
      }
      if (this.multiPage) {
        this.$nextTick(() => {
          this.setCachedKey(newRoute)
        })
      }
    }
  },
  methods: {
    changePage(key) {
      this.activePage = key
      const page = this.pageList.find(item => item.path === key)
      this.$router.push(page.fullPath)
    },
    remove (key, next) {
      if (this.pageList.length === 1) {
        return;
      }
      //清除缓存
      let index = this.pageList.findIndex(item => item.path === key)
      this.clearCaches = this.pageList.splice(index, 1).map(page => page.cachedKey)
      if (next) {
        this.$router.push(next)
      } else if (key === this.activePage) {
        index = index >= this.pageList.length ? this.pageList.length - 1 : index
        this.activePage = this.pageList[index].path
        this.$router.push(this.activePage)
      }
    },
    createPage(route) {
      return {
        keyPath: route.matched[route.matched.length - 1].path,
        fullPath: route.fullPath, loading: false,
        path: route.path,
        title: route.meta && route.meta.title,
        unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
      }
    },
    /**
     * 设置页面缓存的key
     * @param route 页面对应的路由
     */
    setCachedKey(route) {
      const page = this.pageList.find(item => item.path === route.path)
      page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
      if (!page._init_) {
        const vnode = this.$refs.tabContent.$vnode
        page.cachedKey = vnode.key + vnode.componentOptions.Ctor.cid
        page._init_ = true
      }
    },
    /**
     * 添加监听器
     */
    addListener() {
      window.addEventListener('page:close', this.closePageListener)
    },
    /**
     * 移出监听器
     */
    removeListener() {
      window.removeEventListener('page:close', this.closePageListener)
    },
    closePageListener(event) {
      const {closeRoute, nextRoute} = event.detail
      const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
      const path = closePath && closePath.split('?')[0]
      this.remove(path, nextRoute)
    },
  }
};
</script>

<style lang="less" scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  color: #fff;
  text-align: center;
  line-height: 32px;
}
</style>
